<template>
	<tm-app v-if="showPage">
		<view class="pa-24 bg-F9F9FA sticky t-0 zIndex-10">
			<view class="search-box">
				<image
					class="w-64 h-64"
					src="@/static/tabbar/tab1/seatch-icon.png"
					mode=""
				></image>
				<tm-input style="width: 80%;" color="white" v-model="params.search"></tm-input>
				<view class="w-42 h-42 br-200 bg-D9D9D9 fd-r jc-c" @click="getOrderListFn">
					<tm-icon
						:font-size="24"
						name="tmicon-arrow-right"
						color="white"
					></tm-icon>
				</view>
			</view>
		
			<tm-tabs
				transprent
				activeFontColor="#F53A39"
				tabs-line-ani-color="#F53A39"
				@change="tabschange"
				showTabsLineAni
				:list="tabsTitle"
				:item-width="175"
				:width="702"
				default-name="1"
			></tm-tabs>
		</view>
		<view v-if="orderList.length>0">
			<block v-for="(item,index) in orderList" :key="item">
				<order-card :detail="item" @reflash="getOrderListFn(1)"/>
			</block>
		</view>
		<view class="no-msg" v-else>
			<tm-result :showBtn="false"></tm-result>
		</view>
	</tm-app>

	<tm-skeleton v-else></tm-skeleton>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {  onShow, onReachBottom,onPullDownRefresh } from '@dcloudio/uni-app';
// import orderApi from '@/api/orderApi.js';
import OrderCard from './component/order-card.vue';
import { storeToRefs } from 'pinia';
import { useOrderTypeStore } from '@/store/orderType.js';


const orderTypeStore = useOrderTypeStore();
const { orderTypeMapArr } = storeToRefs(orderTypeStore);

const params = ref({
	pageNum: 1,
	pageSize: 10,
	search: '',
	status:''
});
const orderList = ref([]);
const getOrderListFn = async (type:any) => {
	if(type){
		params.value.pageNum = 1
		params.value.pageSize = 10
		params.value.search = ''
		params.value.status = ''
		orderList.value = []
	}
	orderApi.getOrderList(params.value).then((res) => {
		const arr = res.data.list.map((v) => {
			v.mainImg = JSON.parse(v.goodsPic)
			v.sku = JSON.parse(v.goodsSkuAttr)
			return v;
		});

		orderList.value.push(...arr);
	});
};
onShow(() => {
	getOrderListFn(1);
});
onReachBottom(() => {
	if (orderList.value.length % 10 == 0) {
		params.value.pageNum++;
	} else {
		return;
	}

	getOrderListFn(null);
});
const tabsTitle = orderTypeMapArr;

const showPage = ref(true);
const tabschange = (e) =>{
	params.value.status = e
	orderList.value = []
	getOrderListFn(null)
}
onPullDownRefresh(() => {
	params.value.pageNum = 1
	params.value.pageSize = 10
	params.value.search = ''
	params.value.status = ''
	orderList.value = []

	getOrderListFn(null);
});
</script>

<style lang="scss" scoped>
.search-box {
	padding-right: 14rpx;
	height: 66rpx;
	border-radius: 33rpx;
	background-color: white;
	display: flex;
	align-items: center;
}
</style>
